<script type="text/x-template" id="inline-collection-list">
    <div class="collection-page">
        <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
        <div v-if="data['data'] != 'null'" class="well itemContainer">
            <template v-for="(item, key) in data.data">
                <template v-if="item.type == 'artists'">
                    <mediaitem-square :item="item"></mediaitem-square>
                </template>
                <template v-else>
                    <mediaitem-list-item
                            v-if="getKind(item) == 'song'"
                            :index="key"
                            :item="item"></mediaitem-list-item>
                    <mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
                </template>
            </template>
            <button v-if="triggerEnabled" style="opacity:0;height: 32px;"
                    v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
            </button>
        </div>
        <transition name="fabfade">
            <button class="top-fab" v-show="showFab" @click="scrollToTop()"
                    :aria-label="app.getLz('action.scrollToTop')">
                <%- include("../svg/arrow-up.svg") %>
            </button>
        </transition>
        <div class="well itemContainer" v-show="loading">
            <div class="spinner"></div>
        </div>
    </div>
</script>
<script>
  Vue.component('inline-collection-list', {
    template: "#inline-collection-list",
    props: {
      data: {
        required: true
      },
      title: {
        type: String,
        required: false
      },
      type: {
        type: String,
        required: false,
        default: "artists"
      },
      parentSelector: {
        type: String,
        required: false,
        default: null
      },
    },
    data: function() {
      return {
        triggerEnabled: true,
        canSeeTrigger: false,
        showFab: false,
        commonKind: "song",
        api: this.$root.mk.api,
        loading: false,
        app: this.$root,
      }
    },
    methods: {
      getKind(item) {
        if (typeof item.kind != "undefined") {
          this.commonKind = item.kind;
          return item.kind
        }
        if (typeof item.attributes.playParams != "undefined") {
          this.commonKind = item.attributes.playParams.kind
          return item.attributes.playParams.kind
        }
        return this.commonKind
      },
      scrollToTop() {
        let target = document.querySelector(".header-text")
        document.querySelector(this.parentSelector ?? ".collection-page").scrollTo({
          top: 0,
          left: 0,
          behavior: 'smooth'
        })
      },
      getNext() {
        let self = this
        this.triggerEnabled = false;
        if (typeof this.data.next == "undefined") {
          return
        }
        this.loading = true

        this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
          console.log(response)
          if (!app.collectionList.response.groups) {
            this.data.data = this.data.data.concat(response.data.data);
            if (response.data.next) {
              this.data.next = response.data.next;
              this.triggerEnabled = true;
            }
            this.loading = false
          } else {
            if (!response.data.results[app.collectionList.response.groups]) {
              this.loading = false
              return
            }
            this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
            if (response.data.results[app.collectionList.response.groups].next) {
              this.data.next = response.data.results[app.collectionList.response.groups].next;
              this.triggerEnabled = true;
              this.loading = false
            }
          }
        })
      },
      headerVisibility: function(isVisible, entry) {
        if (isVisible) {
          this.showFab = false;
        } else {
          this.showFab = true;
        }
      },
      visibilityChanged: function(isVisible, entry) {
        if (isVisible) {
          this.canSeeTrigger = true;
          this.getNext();
        } else {
          this.canSeeTrigger = false;
        }
      }
    }
  })
</script>
